'use client';

import { useState } from 'react';

interface HeaderProps {
  onTabChange: (tab: number) => void;
}

export default function Header({ onTabChange }: HeaderProps) {
  const [activeTab, setActiveTab] = useState(1);
  
  const tabs = [
    { id: 0, name: '换挡' },
    { id: 1, name: '工程项目1' },
    { id: 2, name: '工程项目2' },
    { id: 3, name: '工程项目3' },
    { id: 4, name: '工程项目4' },
  ];
  
  const handleTabClick = (tabId: number) => {
    setActiveTab(tabId);
    onTabChange(tabId);
  };
  
  return (
    <header className="w-full flex bg-blue-900 h-8">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          className={`px-4 py-1 text-sm font-medium ${
            activeTab === tab.id 
              ? 'bg-yellow-400 text-black' 
              : 'bg-blue-900 text-white'
          }`}
          onClick={() => handleTabClick(tab.id)}
        >
          {tab.name}
        </button>
      ))}
      <div className="ml-auto flex items-center pr-2">
        <span className="text-white mr-2 text-sm">chungtai</span>
        <button className="text-white">
          <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 9v6h4l5 5V4L7 9H3z"></path>
            <path d="M16.5 7.5a5 5 0 0 1 0 9"></path>
          </svg>
        </button>
      </div>
    </header>
  );
} 